<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script lang="ts" setup>
import { merge } from "lodash-es";
import { ref, onMounted, PropType } from "vue";
import echarts from "../../utils/echarts";
import { ECOption } from "../../utils/echarts";
import defaultOption from "./defaultOption";

defineOptions({
  name: "Chart",
});

const props = defineProps({
  option: {
    type: Object as PropType<ECOption>,
    required: true,
  },
});

const option = merge({}, defaultOption, props.option);
const chartRef = ref();

onMounted(() => {
  const myEcharts = echarts.init(chartRef.value);
  myEcharts.setOption(option);
});
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
